<template>
  <div>
    <!-- 头部菜单开始 -->
    <section class="user-header">
      <div class="user-icon">
<!--         <blur :blur-amount=40 :url="url">
          <p class="center"><img :src="url"></p>
        </blur> -->
        <p class="center"><img :src="url"></p>
        <p class="name">W.TBF</p>
      </div>
    </section>
    <!-- 头部菜单结束 -->

    <!-- 订单地址开始 -->
    <section class="user-goods-list">
      <!-- 用户订单开始 -->
      <card :header="header" :footer="{title:'查看更多',link:'/component/panel'}">
        <div slot="content" class="card-demo-flex card-demo-content01">
          <div class="vux-1px-l vux-1px-r">
            <span>1130</span>
            <br/>
            订单
          </div>
          <div class="vux-1px-r">
            <span>15</span>
            <br/>
            待发货
          </div>
          <div class="vux-1px-r">
            <span>0</span>
            <br/>
            待付款
          </div>
          <div>
            <span>88</span>
            <br/>
            好评
          </div>
        </div>
      </card>
      <!-- 用户订单结束 -->
      <group>
        <cell title="我的地址" is-link>
          <div class="badge-value" slot="value">
            <badge text="8"></badge>
          </div>
        </cell>
      </group>
      <!-- 用户地址开始 -->

      <!-- 推荐商品开始 -->
      <card :header="{title:'爆款好货'}" :footer="{title:'查看更多',link:'/component/panel'}">
        <div slot="content" class="g-goods">
          <div class="g-goods-item">
            <img src="http://img0.imgtn.bdimg.com/it/u=1127868086,1876194502&fm=21&gp=0.jpg">
          </div>
          <div class="g-goods-item">
            <img src="http://img0.imgtn.bdimg.com/it/u=1127868086,1876194502&fm=21&gp=0.jpg">
          </div>
        </div>
      </card>
      <!-- 推荐商品结束 -->

      <!-- 用户地址结束 -->
    </section>
    <!-- 订单地址结束 -->
    <bottom-tabbar></bottom-tabbar>
  </div>
</template>

<style lang="less" scoped>
  @import '~vux/dist/styles/1px.css';

  /*用户信息头部*/
  .user-header {
    width: 100%;
    height: 180px;
    background: #ff5d5d;
    display: box;
    display: -webkit-box;
    display: -moz-box;
    box-pack: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-align: top;
    -webkit-box-align: top;
    -moz-box-align: top;
    .user-icon {
      width: 100px;
      height: 100px;
      border-radius: 100%;
      -webkit-border-radius: 100%;
      text-align: center;
      color: #403f3f;
      .name {
        letter-spacing: 2px;
        color: #fff;
      }
      img {
        margin-bottom: 4px;
        width: 100%;
        height: 100%;
        border-radius: 100%;
        -webkit-border-radius: 100%;
      }
    }
  }
  .center {
    text-align: center;
    padding-top: 20px;
    color: #fff;
    font-size: 18px;
  }
  .center img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 4px solid #ececec;
  }
  /*用户订单*/
  .card-demo-flex {
    display: flex;
  }
  .card-demo-content01 {
    padding: 10px 0;
  }
  .card-padding {
    padding: 15px;
  }
  .card-demo-flex > div {
    flex: 1;
    text-align: center;
    font-size: 12px;
  }
  .card-demo-flex span {
    color: #f74c31;
  }

  /*用户地址*/
  .badge-value {
    display: inline-block;
  }

  /*推荐商品*/
  .g-goods {
    display: box;
    display: -webkit-box;
    display: -moz-box;
    overflow: hidden;
    padding: 0px 6px;
    .g-goods-item {
      display: block;
      height: 140px;
      width: 200px;
      -webkit-box-flex: 1;
      box-flex: 1;
      margin: 10px 4px;  
      & > img {
        width: 100%;
        height: 100%;
      }
    }    
  }
  .g-goods .g-goods-item {
    -webkit-box-flex: 1;
  }
</style>

<script>
  import {Card, Group, Cell, Badge, Blur, Scroller} from 'vux';
  import BottomTabbar from '../../components/tabbar';
  export default {
    data () {
      return {
        header: {
          title: '我的订单'
        },
        footer: {
          title: '查看更多',
          url: 'http://vux.li'
        },
        url: 'http://img0.imgtn.bdimg.com/it/u=3660720191,2929268405&fm=116&gp=0.jpg'
      }
    },
    components: {
      Card,
      Group,
      Cell,
      Badge,
      Blur,
      Scroller,
      BottomTabbar
    },
  };
</script>
